<template>
  <div>
    <el-container style="height: 1050px; border: 1px solid #eee">
      <!-- <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> -->

      <el-menu
        style="width: 150px"
        :collapse="true"
        default-active="1"
        :unique-opened="true"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            首页
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">首页系统</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            文章管理
          </template>
          <el-menu-item index="2-1">
            <router-link tag="li" to="/Main/articleManagementType"
              >文章类型</router-link
            >
          </el-menu-item>
          <el-menu-item index="2-2">
            <router-link tag="li" to="/Main/articleManagementContent"
              >文章内容管理</router-link
            >
          </el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            广告管理
          </template>
          <el-menu-item index="2-1">
            <router-link tag="li" to="/Main/advertisementType"
              >广告类型</router-link
            >
          </el-menu-item>
          <el-menu-item index="2-2">
            <router-link tag="li" to="/Main/advertisementContent"
              >内容管理</router-link
            >
          </el-menu-item>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            残疾人管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">残疾人管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            设备管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">设备管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            健康管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="6-1">健康数据</el-menu-item>
            <el-menu-item index="6-2">分值管理</el-menu-item>
            <el-menu-item index="6-3">评述配置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            意见投诉
          </template>
          <el-menu-item-group>
            <el-menu-item index="7-1">意见投诉</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            系统消息
          </template>
          <el-menu-item-group>
            <el-menu-item index="8-1">消息管理</el-menu-item>
            <el-menu-item index="8-2">消息类型</el-menu-item>
            <el-menu-item index="8-3">消息中心</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="9">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            服务回访
          </template>
          <el-menu-item-group>
            <el-menu-item index="9-1">服务回访</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="10">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            应用服务管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="10-1">服务类型管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="11">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            对账管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="11-1" @click="redirect('/main/bill')">对账单</el-menu-item>
            <el-menu-item index="11-2" @click="redirect('/main/billDetail')">账单明细</el-menu-item>
            <el-menu-item index="11-3" @click="redirect('/main/commissionSettlement')">提成结算</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="12">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            订单管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="12-1">订单列表</el-menu-item>
            <el-menu-item index="12-2">订单设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="13">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            退款管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="13-1">退款介入</el-menu-item>
            <el-menu-item index="13-2">订单取消配置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="14">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            评价管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="14-1">评价列表</el-menu-item>
            <el-menu-item index="14-2">评价配置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="15">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            警告历史
          </template>
          <el-menu-item-group>
            <el-menu-item index="15-1">警告记录</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="16">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            预案管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="16-1">预案列表</el-menu-item>
            <el-menu-item index="16-2">预案归属</el-menu-item>
            <el-menu-item index="16-3">预案类型</el-menu-item>
            <el-menu-item index="16-4">事故类型</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="17">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            陪护员管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="17-1">
              <router-link tag="li" to="/Main/EscortList"
              >陪护员列表</router-link
            >
              </el-menu-item>
            <el-menu-item index="17-2">
              <router-link tag="li" to="/Main/EscortList"
              >当前状态</router-link></el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="18">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            系统管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="18-1" @click="redirect('/main/admin')"
              >用户管理</el-menu-item
            >
            <el-menu-item index="18-2">企业管理</el-menu-item>
            <el-menu-item index="18-3">部门管理</el-menu-item>
            <el-menu-item index="18-4">区域管理</el-menu-item>
            <el-menu-item index="18-5">角色管理</el-menu-item>
            <el-menu-item index="18-6">登陆日志</el-menu-item>
            <el-menu-item index="18-7">操作日志</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

      <!-- </el-aside> -->

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          王小虎
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script>
export default {
  data() {
    return {
      name: "type",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 监听到位置变化上传到后端
    sucCallback(position) {
      console.log(position);
    },
    // 路由页面跳转方法
    redirect: function (view) {
      this.$router.push(view);
    },
  },
  mounted() {
    if (sessionStorage.getItem("token")) {
      var geolocation = new qq.maps.Geolocation(
        "NTSBZ-VAQWU-DVMV3-BDGGI-YH3X5-45BOW",
        "myapp"
      );
      // 开启位置监听
      geolocation.watchPosition(this.sucCallback);
    }
  },
  beforeDestroy() {
    // 清楚位置监听
    geolocation.clearWatch();
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-container {
  height: 100vh;
  background-color: rgb(232, 235, 240);
}
</style>